<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<input type="radio" value="1" name="color"> 红色
<input type="radio" value="2" name="color"> 绿色
<input type="radio" value="3" name="color"> 蓝色
<div id="d1"></div>
<input type="checkbox" value="1" onchange="sel(event)"> 选中
<div></div>
<select id="s1" onchange="sel(event)">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<script>
    let colors = document.querySelectorAll("input[name='color']");
    for (let index in colors) {
        colors[index].onchange = function (e) {
            console.log(e.target);
            console.log(e.target.value);
            if (e.target.value == 1) {
                document.querySelector("#d1").style.backgroundColor = "red";
            } else if (e.target.value == 2) {
                document.querySelector("#d1").style.backgroundColor = "green";
            } else if (e.target.value == 3) {
                document.querySelector("#d1").style.backgroundColor = "blue";
            }
        }
    }

    function sel(e) {
        console.log(e.target.value);
        // 复选框和单选框的选中状态
        console.log(e.target.checked);
        // 如果select，则打印被选中的option的selected值
        console.log(e.target.options[e.target.selectedIndex].selected);
    }
</script>
</body>
</html>